<title>旺进财</title>
#@homejs()

<body  bgcolor="#fafafa" style="margin:0px;">   
	#@homemenu("trade")
	<div align="center" style="width:100%"> 
		<div style="width:1100px;">
			<!--选择区域-->
			<div align="left" style="line-height:70px;width:100%;margin-top:10px;height:140px;background:#FFF;">
				<div style="height:70px;width:100%;border-bottom:1px solid #ebebeb">
					<span style="margin:0 20px 0 20px;">投资期限</span>
					<span seleinfo1="" class="qixian yuefen yuefens">全部</span>
					<span seleinfo1="30" class="qixian yuefen">1个月</span>
					<span seleinfo1="60" class="qixian yuefen">2个月</span>
					<span seleinfo1="90" class="qixian yuefen">3个月</span> 
					<span seleinfo1="180" class="qixian yuefen">6个月</span>
					<span seleinfo1="360" class="qixian yuefen">12个月</span>
					
				</div>
				<div style="height:70px;width:100%;">
					<span style="margin:0 20px 0 20px;">预期年化</span>
					<span seleinfo2=""  class="nianhua yuefen yuefens">全部</span>
					<span seleinfo2="5"  class="nianhua yuefen">5%以上</span> 
					<span seleinfo2="10" class="nianhua yuefen">10%以上</span>
					<span seleinfo2="15" class="nianhua yuefen">15%以上</span>
					<span seleinfo2="20"  class="nianhua yuefen">20%以上</span>
				
				</div>
			</div> 
			<!--标的列表-->
			<div id="tradeall" style="width:1100px;margin-top:10px;background:#FFF;min-height:500px;">
			</div>
			<!--分页-->
			<div style="font-size:14px;height:50px;width:100%;padding-bottom:10px;background:#FFF;line-height:50px;">
				<span id="firstpage" style="cursor:pointer;padding:5px 10px 5px 10px;border:1px solid #ebebeb;border-radius:5px 0 0 5px;">
					首页
				</span>
				<span id="backpage" style="cursor:pointer;padding:5px 10px 5px 10px;border:1px solid #ebebeb;">
					上一页
				</span>
				<span style="padding:5px 10px 5px 10px;border:1px solid #ebebeb;">
					第<span id="pageNumber"></span>页&nbsp&nbsp共<span id="totalPage"></span>页
				</span>
				<span id="nextpage" style="cursor:pointer;padding:5px 10px 5px 10px;border:1px solid #ebebeb;">
					下一页
				</span>
				<span id="lastpage" style="cursor:pointer;padding:5px 10px 5px 10px;border:1px solid #ebebeb;border-radius:0 5px 5px 0;">
					尾页
				</span>
				<span style="margin-left:50px;">第</span>
				<input id="pagenum" style="border:1px solid #ebebeb;border-radius:5px;height:32px;width:40px;padding:0 10px 0 10px;font-size:16px;"  /> 
				<span>页</span>
				<span id="gopage" style="cursor:pointer;padding:5px 10px 5px 10px;border:1px solid #ebebeb;border-radius:5px;">
					跳转
				</span>
			</div>
		</div>
	</div>
	<!--@paginate(page.pageNumber, page.totalPage, "/blog/")-->

<script id="demo" type="text/x-jquery-tmpl">
	<div align="left" style="width:1020px;height:150px;padding:10px 40px 20px 40px;border-bottom:1px solid #ebebeb">
		<div style="border-bottom:1px solid #ebebeb;width:1020px;font-size:18px;font-weight:400;line-height:50px;">
			<span>${name}</span>
			<span ${firsthid}  class="jxyc">仅限一次</span> 	
			<span ${experihid}  class="tyjky">体验金可用</span> 
			<img ${dxhid} style="margin:10px 0 0 10px;" src="#(path)/assets/home/trade/tradeclose.png">
		</div>
		<div style="width:1020px;padding-top:15px;">
			<div align="left" style="width:180px;float:left">
				<div style="color:#ee3b3f;font-size:36px;"><span>${rate}%</span><span style="color:#ff6f4d;font-size:24px">${plus_rate}</span></div>
				<div style="margin-top:12px;color:#a9a8a6">预期年化</div>
			</div>
			<div align="left" style="width:160px;float:left">
				<div style="color:#393939;font-size:36px;"> 
					<span>${day_limit}						
						<span style="color:#a8a7a5;font-size:18px;margin-left:-5px;">天</span>
					</span>
				</div>
				<div style="margin-top:12px;color:#a9a8a6">预期期限</div>
			</div>
			<div align="left" style="width:204px;float:left;margin-top:15px;">
				<div style="color:#626262;font-size:16px;">起投份数${least_unit}份</div>
				<div style="margin-top:20px;color:#626262">融资金额：${amount}元</div>
			</div>
			<div align="left" style="width:264px;float:left;margin-top:15px;">
				<div style="color:#626262;font-size:16px;">
					<div >
						<div style="height:20px;line-height:20px;float:left;font-size:16px;color:#616161">投资进度：</div>
						<div style="float:left;width:80px;height:32px;overflow:hidden;">
							<div style="overflow:hidden;border-radius:5px;position:relative;float:left;margin-top:5px;height:10px;width:100%;background:#fa3048">
								<div id="jindu${id}" style="position:relative;float:left;height:10px;width:100%;background:#eee"></div>
							</div>   
						</div>
						<div style="height:20px;line-height:20px;float:left;margin-left:10px;font-size:16px;color:#616161">${jindu}%</div>
					</div>
				</div>
				<div style="margin-top:40px;clear:both;color:#626262">剩余可投：${shengyu}</div> 
			</div>
			<div align="left" style="width:204px;float:left;margin-top:20px;">
				<div status="${status}" bidname2="${name}" bidid="${id}" class="${tradeclass} status" align="center" >
					${tradeinfo}
				</div> 
			</div>
		</div>
	</div>
</script>
<script>
$(document).ready(function(){	
	var page = 1;
	var day = "";
	var rate = "";
	var size = 10; 
	var pageNumber ="1";
	var totalPage ="1";
	var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
	getalllist(url); 
	$(".qixian").click(function(){
		$(".qixian").removeClass("yuefens"); 
		$(this).addClass("yuefens");
		day = $(this).attr("seleinfo1");
		$("#tradeall").empty();
		var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
		getalllist(url);
	});
	$(".nianhua").click(function(){
		$(".nianhua").removeClass("yuefens"); 
		$(this).addClass("yuefens"); 
		rate = $(this).attr("seleinfo2");
		$("#tradeall").empty();
		var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
		getalllist(url); 
	}); 
	//上一页
	$("#backpage").click(function(){
		page = pageNumber-1;
		if(page <= 0){
			layer.msg("当前已是首页！",{icon:2,time:1000}); 
		}else{
			$("#tradeall").empty();
			var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
			getalllist(url); 
		}
	}); 
	//下一页
	$("#nextpage").click(function(){
		page = pageNumber + 1;
		if(page > totalPage){
			layer.msg("当前已是尾页！",{icon:2,time:1000}); 
		}else{
			$("#tradeall").empty();
			var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
			getalllist(url); 
		}
	}); 
	//首页
	$("#firstpage").click(function(){
		page = 1;
		$("#tradeall").empty();
		var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
		getalllist(url); 
	}); 
	//尾页
	$("#lastpage").click(function(){
		page = totalPage;
		$("#tradeall").empty();
		var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
		getalllist(url); 
	});  
	//跳转
	$("#gopage").click(function(){
		page = $("#pagenum").val();
		if(page > totalPage || page < 1 ){
			layer.msg("输入页数不在区间内！",{icon:2,time:1000}); 
		}else{
			$("#tradeall").empty();
			var url = "#(path)/bids?size="+size+"&status=trading*finish*waiting*repaying&page="+page+"&day="+day+"&rate="+rate;
			getalllist(url); 
		}
	}); 
	function getalllist(url){
		$.getJSON(url, function(tradeall) {
			if(tradeall.data.page.list.length==0){
				$("#tradeall").append("<div align='center' style='height:50px;line-height:50px;'>旺~抱歉，暂无数据！</div>");
			} else{
				totalPage = tradeall.data.page.totalPage;
				pageNumber = tradeall.data.page.pageNumber;
				if(totalPage==0){
					totalPage = 1;
				}
				if(pageNumber==0){
					pageNumber = 1;
				}
				$("#totalPage").html(totalPage);
				$("#pageNumber").html(pageNumber);
				$.each(tradeall.data.page.list, function(i, item){ 
					console.log(item);
					var experihid = "hidden";
					var firsthid = "hidden"; 
					var dxhid = "hidden"; 
					var jindu = (Number(item.avunit) * Number(item.unit_amount)*100/ Number(item.amount)).toFixed(2);
					if(item.type == "experi"){
						var shengyu = (Number(item.unit)-Number(item.avunit)).toFixed(2)+" 元";
						experihid = "show";
					}else { 
						var shengyu = Number(item.unit)-Number(item.avunit)+" 份";
						if(item.type == "first"){ 
							firsthid = "show"
						}
					}
					if(item.is_direct=="1"){ 
						dxhid = "show";
					}
					if(item.status=="trading"){
						var tradeclass = "tradebutton1";
						var tradeinfo = "立即投资"; 
						
					}else if(item.status=="waiting"){
						var tradeclass = "tradebutton2";
						var tradeinfo = "未开始"; 
					}else if(item.status=="repaying"){
						var tradeclass = "tradebutton3";
						var tradeinfo = "还款中"; 
					}else if(item.status=="finish"){
						var tradeclass = "tradebutton4";
						var tradeinfo = "已还款"; 
					}  
					if(item.plus_rate=="0.0"){
						var plus_rate="";
					}else{
						var plus_rate="+"+item.plus_rate+"%";
					}
					var invests = {plus_rate:plus_rate,status:item.status,tradeinfo:tradeinfo,tradeclass:tradeclass,dxhid:dxhid,experihid:experihid,firsthid:firsthid,shengyu:shengyu,id:item.id,jindu:jindu,amount:item.amount,name:item.name,rate:item.rate,day_limit:item.day_limit,least_unit:item.least_unit,amount:item.amount}; 
					$("#demo").tmpl(invests).appendTo('#tradeall');
					$("#jindu"+item.id).animate({left:jindu+'%'},1000);
				});
				$(".status").click(function(){
					console.log(1);
					var status = $(this).attr("status");
					var bidname2 = $(this).attr("bidname2");
					var bidid = $(this).attr("bidid");
					if(status=="finish"){
						alert(bidname2+" 已正常还款，为保障借款人信息安全，故不予显示相关信息，还请谅解"); 
					}else{
						window.location.href='#(path)/trade-tradeinfo?id='+bidid;
					}
				});
			}
		});
	}
});
</script>
	#@homefoot1()
	#@homefoot2()